<HTML>
 <HEAD>
  <TITLE>使用自定义渲染函数更新页面元素示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
 <script type="text/javascript">
	Ext.onReady(function(){
		var btns = Ext.get('updateBtn');//选择页面中id为updateBtn的元素
		btns.on('click',update);//绑定单击事件
		
		//得到元素的加载器对象（Ext.ElementLoader）
		var loader = Ext.get('content-div').getLoader();
		
		//定义更新函数
		function update(){
			loader.load({//调用更新器的update方法，更新页面元素
				url : 'timeServer.jsp',
				//自定义渲染函数
				renderer : function(loader,response,request){
					var time = Ext.getDom('serverTime');
					//获取响应数据
					time.value = response.responseText;
				}
			});
		}
	});
  </script>
 <BODY STYLE="margin: 10px">
	<div id="content-div" style="width:200px; height:100px; border:2px solid #ccc">
		<table width=100%>
			<tr><td width=150>服务器时间：</td></tr>
			<tr><td><input id='serverTime' type='text'/></td></tr>
			<tr><td colspan=2><input type=button value='更新时间' id='updateBtn'></td></tr>
		</table>
	</div>
 </BODY>
</HTML>